<template>
  <!-- 图片视频轮播 -->
  <view
    :class="{ mask: show }"
    @click="close"
    @touchmove.stop.prevent="moveHandle"
  >
    <!-- 预览的指示点 -->
    <view class="dots" v-if="show">
      <text>{{ num + 1 + "/" + list.length }}</text>
      <image src="/static/closex.png" mode="aspectFill"></image>
    </view>
    <swiper
      :style="{ height: show ? '100%' : height + 'rpx' }"
      class="swiper"
      :class="{ scale: show }"
      circular
      :indicator-dots="indicator"
      indicator-active-color="#fff"
      :autoplay="autoplay"
      :interval="interval"
      :duration="500"
      :disable-touch="touch"
      @change="onChange"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <!-- 轮播视频 -->
        <view class="video" v-if="item.type == 'video'" @click.stop="open">
          <!-- 后期可对视频增加自定义封面 -->
          <view class="fmimg" v-show="!videoShow">
            <!-- 自定义封面图片和播放按钮 -->
            <image
              class="img"
              src="http://m.sd.10086.cn/mall_img/202309/20230901143939_706770.jpg"
              mode="widthFix"
            >
            </image>
            <image
              class="play"
              src="/static/new/play.png"
              mode="widthFix"
            ></image>
          </view>
          <!-- 视频功能 -->
          <view
            class=""
            v-html="
              `<video
                                class=&quot;myVideo&quot;
                              id=&quot;myVideo_&quot;
                              style=&quot;height: ${height} + rpx &quot;
                              src=&quot;${item.src}&quot;
                              @error=&quot;${videoErrorCallback}&quot;
                              autoplay=&quot;${videoPlay}&quot;
                              muted=&quot;${muted}&quot;
                              show-play-btn=&quot;${true}&quot;
                              :show-fullscreen-btn=&quot;${fullscreen}&quot;
                              :enable-progress-gesture=&quot;${false}&quot;
                              controls
                              :show-mute-btn=&quot;${true}&quot;
                              @play=&quot;play_&quot;
                              @pause=&quot;pause_&quot;
                              @ended=&quot;ended&quot;
                              v-if=&quot;${item.type} == video&quot;
                              ></video>`
            "
          ></view>

          <!--          <cover-view style="width: 100%; height: 100%; background-color: #fff">-->
          <!--   <video
               class="myVideo"
               id="myVideo_"
               :style="{ height: height + 'rpx' }"
               :src="item.src"
               @error="videoErrorCallback"
               :autoplay="videoPlay"
               :muted="muted"
               :show-play-btn="true"
               :show-fullscreen-btn="fullscreen"
               :enable-progress-gesture="false"
               controls
               :show-mute-btn="true"
               @play="play_"
               @pause="pause_"
               @ended="ended"
               v-if="item.type == 'video'"
             ></video> -->
          <!--          </cover-view>-->
        </view>
        <!-- 轮播图片 -->
        <!-- 预览弹窗未打开 - 不可缩放 否则 缩放 -->
        <image
          class="img"
          :style="{ height: height + 'rpx' }"
          :src="item.src"
          mode="aspectFill"
          @click.stop="open"
          v-else-if="item.type == 'img' && !show"
        ></image>
        <movable-area class="movable-area" v-else>
          <movable-view
            inertia
            @change="movableChange"
            :style="{ height: height + 'rpx' }"
            class="movable-view"
            :direction="direction"
            scale-min="1"
            scale-max="4"
            scale-value="1"
            scale
            @scale="scale"
          >
            <image
              class="lookimg"
              :src="item.src"
              mode="aspectFill"
              @click.stop="open"
            ></image>
          </movable-view>
        </movable-area>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
/*
 list       --   轮播数据: 数组格式/不传无法轮播
 height     --   轮播高度
 videoPlay  --   是否自动播放
 muted 			--   是否静音播放
 autoplay 【:autoplay.sync="autoplay" 】   --   是否自动轮播
 interval   --   轮播时间

 轮播功能想更多自定义修改 -- 请在组件内部修改，页面中已注释  逻辑根据自己需求改。
 建议下载示例项目-避免因为缺失演示数据而导致报错。
 目前只测试 微信小程序和H5和APP -- 其他平台未知。
 [Author:chenxin  交流vx:cxalq8-24]
*/
export default {
  props: {
    list: {
      // 轮播数据
      type: Array,
      default: [
        {
          type: "video",
          src: "/static/video.mp4",
        },
        {
          type: "img",
          src: "/static/one.jpg",
        },
        {
          type: "img",
          src: "/static/two.jpg",
        },
      ],
    },
    height: {
      // 整体高度
      type: String,
      default: "600",
    },
    videoPlay: {
      //是否自动播放
      type: Boolean,
      default: false,
    },
    muted: {
      //是否静音播放
      type: Boolean,
      default: true,
    },
    autoplay: {
      //是否自动轮播
      type: Boolean,
      default: true,
    },
    interval: {
      //轮播时间
      type: Number,
      default: 5000,
    },
  },
  data() {
    return {
      num: 0, //当前轮播索引
      show: false, //弹窗
      videoShow: true, //封面
      videoContext: "", //视频组件挂载
      fullscreen: false, //视频-全屏按钮
      indicator: true, //面板指示点
      type: "video",
      touch: false,
      direction: "horizontal",
      swiperPlay: false, //监听第一次是否播放完毕
    };
  },
  mounted() {
    console.log(this.list);
    this.$nextTick(() => {
      this.videoContext = uni.createVideoContext("myVideo_");
    });
  },
  onHide() {
    this.pause();
  },
  onUnload() {
    this.pause();
  },
  watch: {
    show(val) {
      if (val) {
        //预览弹窗打开时
        this.indicator = false; //隐藏面板指示点
        this.fullscreen = true; //显示视频全屏按钮
        // document.body.style.position = "fixed"; // 阻止页面滚动
        this.$emit("update:autoplay", false); // - 暂停轮播
        this.$emit("update:isShowSwiper", true);
      } else {
        this.indicator = true;
        this.fullscreen = false;
        this.touch = false;
        // document.body.style.position = "";
        this.$emit("update:autoplay", true);
        this.$emit("update:isShowSwiper", false);
      }
    },
  },
  methods: {
    moveHandle() {},

    //点击打开关闭-预览弹窗
    open() {
      //视频类型时不可关闭弹窗
      if (this.type == "video" && this.show) {
        return;
      }
      //监听第一次播放完_点击再开启播放
      if (this.type == "video" && !this.show && this.swiperPlay) {
        this.play();
        return;
      }
      this.show = !this.show;
      // this.show = !this.show;
    },
    //关闭弹窗
    close() {
      this.show = false;
    },
    //监听轮播
    onChange(e) {
      let that = this;
      this.num = e.detail.current;
      this.type = this.list[this.num].type;
      // 第一次未播放完毕时自动轮播播放
      // 播放完毕后手动播放
      if (this.type == "video" && !this.swiperPlay) {
        this.play();
      }
      if (this.type == "img") {
        this.pause();
      }
    },
    //播放 -- 暂停轮播
    play_() {
      this.$emit("update:autoplay", false);
      this.swiperPlay = false;
    },
    //暂停 -- 开始轮播
    pause_() {
      if (!this.show) {
        //预览弹窗关闭下起作用
        this.$emit("update:autoplay", true);
      }
    },
    //播放完毕 -- 开始轮播
    ended() {
      if (!this.show) {
        this.$emit("update:autoplay", true);
      }
      this.swiperPlay = true;
    },
    //确保顺利播放暂停
    play() {
      setTimeout(() => {
        this.videoContext.play();
      }, 500);
    },
    pause() {
      setTimeout(() => {
        this.videoContext.pause();
      }, 500);
    },
    //缩放
    scale(e) {
      let scale = e.detail.scale;
      //不等于1说明在缩放 -- 禁止滑动
      if (scale == 1) {
        this.touch = false;
      } else {
        this.touch = true;
      }
    },
    movableChange(e) {
      // console.log('拖动', e)
      // this.x = e.detail.x
      // this.y = e.detail.y
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes zoomIn {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999;

  .dots {
    position: absolute;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 0.1%;
    left: 48.5%;
    margin: 0 auto;
    // border:1px solid red;
    width: 350rpx;

    image {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .swiper-item {
    margin-top: -40rpx;
  }

  .video {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.movable-view {
  width: 100%;
  position: relative;
}

.movable-area {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  // overflow: hidden;
}

.lookimg {
  width: 100%;
  height: 100%;
}

.swiper {
  width: 750rpx;
  background: rgba(0, 0, 0, 1);
  // border: 1px solid blue;

  .swiper-item {
    .img {
      width: 750rpx;
    }

    .fmimg {
      position: relative;

      .play {
        width: 90rpx;
        height: 90rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .myVideo {
      width: 100%;
      z-index: 999 !important;
      // border:1px solid red;
    }
  }
}

::v-deep .uni-swiper-dots-horizontal {
  bottom: 10px;
}
</style>
